<template>
  <div class="mymap-container">
    <div id="map" class="mymap-box"></div>
    <div class="mymap-list">
      <div class="mymap-title">标题</div>
      <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
      </ul>
      <div class="mymap-page">
        <el-pagination layout="prev, pager, next" :total="50" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue' // vue相关方法
import { Map, View, Feature } from 'ol'      // 地图实例方法、视图方法
import Tile from 'ol/layer/Tile'    // 瓦片渲染方法
import XYZ from 'ol/source/XYZ';
import VectorLayer from 'ol/layer/Vector'; // 矢量图层
import VectorSource from 'ol/source/Vector'; // 矢量数据源
import Point from 'ol/geom/Point';
import Overlay from 'ol/Overlay';
import { Style, Icon } from 'ol/style';
import { fromLonLat } from 'ol/proj'; // 经纬度转换
import 'ol/ol.css'                 // 地图样式

const map = ref<Map | null>(null) // 地图实例
const popup = new Overlay({
  element: document.createElement('div'),
  autoPan: true
});

function initMap() {
  // 创建地图实例
  map.value = new Map({
    target: 'map', // 地图容器id
    layers: [
      new Tile({
        source: new XYZ({
          url: 'https://wprd01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}', // 高德矢量地图
          tileSize: 256,
          crossOrigin: 'anonymous'
        })
      })
    ],
    view: new View({
      center: [0, 0], // 地图中心点坐标
      zoom: 2 // 地图缩放级别
    })
  })
  map.value.addOverlay(popup);
  map.value.on('click', (event) => {
    const feature = map.value.forEachFeatureAtPixel(event.pixel, (feature) => {
      return feature;
    });

    if (feature) {
      const coordinate = event.coordinate;
      const description = feature.get('description');

      popup.getElement().innerHTML = `<div style="background: white; padding: 10px;">${description}</div>`;
      popup.setPosition(coordinate);
    } else {
      popup.setPosition(undefined);
    }
  });
}

const drawPoint = () => {
  // 点样式
  const getPointStyle = (icon: string) => {
    return new Style({
      image: new Icon({
        anchor: [0.5, 1],
        src: icon
      })
    });
  };

  // 遍历标注点数据
  const points = [
    { lon: 116.397428, lat: 39.90923, description: '北京', type: '500' },
    { lon: 121.4737, lat: 31.2304, description: '上海', type: '220' }
  ];

  const pointFeatures = points.map((point) => {
    const coordinates = fromLonLat([point.lon, point.lat]);
    const pointFeature = new Feature({
      geometry: new Point(coordinates)
    });

    if (point.type === '500') {
      pointFeature.setStyle(getPointStyle('https://s21.ax1x.com/2024/11/25/pAhYPot.png'));
    } else if (point.type === '220') {
      pointFeature.setStyle(getPointStyle('https://s21.ax1x.com/2024/11/25/pAhYVSS.png'));
    }

    pointFeature.set('description', point.description);
    return pointFeature;
  });

  // 点数据源
  const pointSource = new VectorSource({
    features: pointFeatures
  });

  // 点图层
  const pointLayer = new VectorLayer({
    source: pointSource,
    style: function (feature) {
      return feature.getStyle();
    }
  });

  // 将点图层添加到地图
  map.value.addLayer(pointLayer);
};

onMounted(() => {
  initMap() // 初始化地图
  drawPoint()
})
</script>

<style scoped>
.mymap-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mymap-box {
  width: 100%;
  height: 100%;
}

.mymap-list {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 400px;
  height: 90vh;
  background: rgba(0, 0, 0, .4);
  border-radius: 8px;
  color: #fff;
}

.mymap-page {
  position: absolute;
  bottom: 20px;
  left: 20px;
  --el-fill-color-blank: rgba(0, 0, 0, 0);
  --el-text-color-primary: #fff;
}

.mymap-title {
  text-align: center;
}
</style>
